@keyframes change {
    from {
        top: 80px;
    }
    to {
        top: -120px;
    }
}

@keyframes rotate {
    to {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}

.container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
    transform: scale(.3);
}

.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
}

.wave-change::before,
.wave-change::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 45% 47% 43% 46%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 7s infinite linear;
    z-index: 1;
}

.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}